<!--
author:        hejiyang <silentmanager@163.com>
date:          2024-11-17 17:52:14
component:     index
Copyright © YourCompanyName All rights reserved
拿酒记录
-->
<template>
  <el-card style="margin-bottom: 24px">
    <FormComponent :inline="true" ref="formRef" :config="formConfig">
      <template #submit>
        <div style="margin-left: 24px">
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
        </div>
      </template>
    </FormComponent>
  </el-card>
  <el-card>
    <el-table v-loading="loading" :data="list" style="width: 100%">
      <el-table-column label="序号" width="80">
        <template #default="scope">
          {{ scope.$index + 1 + (queryParams.pageNo - 1) * queryParams.pageSize }}
        </template>
      </el-table-column>
      <el-table-column label="套餐名称" prop="packageName" />
      <el-table-column label="订单状态" prop="orderStatusName" />
      <el-table-column label="录单人" prop="userName" />
      <el-table-column label="录单人班组" prop="deptName" />
      <el-table-column label="对接人" prop="contactName" />
      <el-table-column label="录单时间" prop="createTime" />
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </el-card>
</template>

<script lang="ts" setup>
import FormComponent from '@/components/FormComponent/index.vue'
import { orderDrinkRecord, orderDrinkRecordRes } from '@/api/statistical-report'

// ==================== 表单  ====================
const formRef = ref<InstanceType<typeof FormComponent>>()
const formConfig = ref([
  {
    label: '客户手机',
    prop: 'mobile',
    type: 'input',
    options: {
      placeholder: '请输入客户手机',
      style: {
        width: '500px'
      }
    }
  }
])

// --------------------  表格  ---------------------
const loading = ref(true) // 列表的加载中
const list = ref<orderDrinkRecordRes[]>([]) // 列表的数据
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await orderDrinkRecord({
      ...queryParams,
      mobile: formRef.value?.formData.mobile
    })
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}

/** 初始化 */
onMounted(() => {
  getList()
})
</script>
